<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (bankAccount(); as bankAccountRef) {
      <div>
        <h2 data-cy="bankAccountDetailsHeading">
          <span jhiTranslate="jhipsterSampleApplicationApp.bankAccount.detail.title">Bank Account</span>
        </h2>

        <hr />

        <jhi-alert-error />

        <jhi-alert />

        <dl class="row-md jh-entity-details">
          <dt><span jhiTranslate="global.field.id">ID</span></dt>
          <dd>
            <span>{{ bankAccountRef.id }}</span>
          </dd>
          <dt><span jhiTranslate="jhipsterSampleApplicationApp.bankAccount.name">Name</span></dt>
          <dd>
            <span>{{ bankAccountRef.name }}</span>
          </dd>
          <dt><span jhiTranslate="jhipsterSampleApplicationApp.bankAccount.balance">Balance</span></dt>
          <dd>
            <span>{{ bankAccountRef.balance }}</span>
          </dd>
          <dt><span jhiTranslate="jhipsterSampleApplicationApp.bankAccount.user">User</span></dt>
          <dd>
            <span>{{ bankAccountRef.user?.login }}</span>
          </dd>
        </dl>

        <button type="submit" (click)="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
          <fa-icon icon="arrow-left" />&nbsp;<span jhiTranslate="entity.action.back">Back</span>
        </button>

        <button type="button" [routerLink]="['/bank-account', bankAccountRef.id, 'edit']" class="btn btn-primary">
          <fa-icon icon="pencil-alt" />&nbsp;<span jhiTranslate="entity.action.edit">Edit</span>
        </button>
      </div>
    }
  </div>
</div>
